@charset "UTF-8";
/*从上往下渐显*/
@-webkit-keyframes fadeInDown{
  0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInDown{
  0% { opacity: 0;-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
/*从下往上渐显*/
@-webkit-keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInUp {
  0% { opacity: 0;-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
  100% {opacity: 1;  -webkit-transform: none;transform: none;}
}
/*从右往左渐显*/
@-webkit-keyframes fadeInRight {
  0% {opacity: 0; -webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  100% {opacity: 1; -webkit-transform: none;transform: none;}
}
@keyframes fadeInRight {
  0% { opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
/*从左往右渐显*/
@-webkit-keyframes fadeInLeft {
  0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
  100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
  100% { opacity: 1; -webkit-transform: none; transform: none;}
}
/*从右往左扇形渐显*/
@-webkit-keyframes rotateInDownRight {
  0% {-webkit-transform-origin: right bottom;transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}
  100% { -webkit-transform-origin: right bottom;transform-origin: right bottom; -webkit-transform: none;transform: none;opacity: 1;}
}
@keyframes rotateInDownRight {
  0% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: rotate3d(0, 0, 1, 45deg);transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}
  100% {-webkit-transform-origin: right bottom;transform-origin: right bottom;-webkit-transform: none;transform: none;opacity: 1;}
}
/*从无到有渐显*/
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}



/* 圆圈顺时针旋转*/
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.rotation{
-webkit-transform: rotate(360deg);
animation: rotation 5s linear infinite;
-moz-animation: rotation 5s linear infinite;
-webkit-animation: rotation 5s linear infinite;
-o-animation: rotation 5s linear infinite;
}
/* 圆圈逆时针旋转*/
@-webkit-keyframes rotation2{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
.rotation2{
-webkit-transform: rotate(-360deg);
animation: rotation2 10s linear infinite;
-moz-animation: rotation2 10s linear infinite;
-webkit-animation: rotation2 10s linear infinite;
-o-animation: rotation2 10s linear infinite;
}
/* 圆圈顺时针旋转2*/
@-webkit-keyframes rotation3{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.rotation3{
-webkit-transform: rotate(360deg);
animation: rotation3 15s linear infinite;
-moz-animation: rotation3 15s linear infinite;
-webkit-animation: rotation3 15s linear infinite;
-o-animation: rotation3 15s linear infinite;
}
@-webkit-keyframes rotation4{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.rotation4{
-webkit-transform: rotate(360deg);
animation: rotation4 2s linear infinite;
-moz-animation: rotation4 2s linear infinite;
-webkit-animation: rotation4 2s linear infinite;
-o-animation: rotation4 2s linear infinite;
}


/*文字发光*/
@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #1d2089,
                     0 0 30px #1d2089,
                     0 0 40px #1d2089,
                     0 0 70px #1d2089,
                     0 0 80px #1d2089,
                     0 0 100px #1d2089,
                     0 0 150px #1d2089;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #1d2089,
                     0 0 15px #1d2089,
                     0 0 20px #1d2089,
                     0 0 35px #1d2089,
                     0 0 40px #1d2089,
                     0 0 50px #1d2089,
                     0 0 75px #1d2089;
    }
}
@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #1d2089,
                     0 0 30px #1d2089,
                     0 0 40px #1d2089,
                     0 0 70px #1d2089,
                     0 0 80px #1d2089,
                     0 0 100px #1d2089,
                     0 0 150px #1d2089;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #1d2089,
                     0 0 15px #1d2089,
                     0 0 20px #1d2089,
                     0 0 35px #1d2089,
                     0 0 40px #1d2089,
                     0 0 50px #1d2089,
                     0 0 75px #1d2089;
    }
}
@-moz-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #1d2089,
                     0 0 30px #1d2089,
                     0 0 40px #1d2089,
                     0 0 70px #1d2089,
                     0 0 80px #1d2089,
                     0 0 100px #1d2089,
                     0 0 150px #1d2089;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #1d2089,
                     0 0 15px #1d2089,
                     0 0 20px #1d2089,
                     0 0 35px #1d2089,
                     0 0 40px #1d2089,
                     0 0 50px #1d2089,
                     0 0 75px #1d2089;
    }
}
@-o-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #1d2089,
                     0 0 30px #1d2089,
                     0 0 40px #1d2089,
                     0 0 70px #1d2089,
                     0 0 80px #1d2089,
                     0 0 100px #1d2089,
                     0 0 150px #1d2089;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #1d2089,
                     0 0 15px #1d2089,
                     0 0 20px #1d2089,
                     0 0 35px #1d2089,
                     0 0 40px #1d2089,
                     0 0 50px #1d2089,
                     0 0 75px #1d2089;
    }
}
/*汉堡包导航动画*/
@-moz-keyframes rotateR {
  from {
    -moz-transform: translateY(0px) rotate(0);
    transform: translateY(0px) rotate(0);
  }
  to {
    -moz-transform: translateY(15px) rotate(45deg);
    transform: translateY(15px) rotate(45deg);
  }
}
@-webkit-keyframes rotateR {
  from {
    -webkit-transform: translateY(0px) rotate(0);
    transform: translateY(0px) rotate(0);
  }
  to {
    -webkit-transform: translateY(15px) rotate(45deg);
    transform: translateY(15px) rotate(45deg);
  }
}
@keyframes rotateR {
  from {
    -moz-transform: translateY(0px) rotate(0);
    -ms-transform: translateY(0px) rotate(0);
    -webkit-transform: translateY(0px) rotate(0);
    transform: translateY(0px) rotate(0);
  }
  to {
    -moz-transform: translateY(15px) rotate(45deg);
    -ms-transform: translateY(15px) rotate(45deg);
    -webkit-transform: translateY(15px) rotate(45deg);
    transform: translateY(15px) rotate(45deg);
  }
}
@-moz-keyframes typing { from { width: 0; } }
@-webkit-keyframes typing { from { width: 0; } }
@keyframes typing { from { width: 0; } }
@-moz-keyframes blink-caret { 50% { border-color: transparent; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
/*平行旋转  */
@keyframes rotate-x {
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@-ms-keyframes rotate-x {
    50% {
        -ms-transform: scaleX(0);
    }
    100% {
        -ms-transform: scaleX(1);
    }
}
/* Safari and Chrome*/
@-webkit-keyframes rotate-x {
    50% {
        -webkit-transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1);
    }
}
/* Firefox  */
@-moz-keyframes rotate-x {
    50% {
        -moz-transform: scaleX(0);
    }
    100% {
        -moz-transform: scaleX(1);
    }
}
/*  Opera  */
@-o-keyframes rotate-x {
    50% {
        -o-transform: scaleX(0);
    }
    100% {
        -o-transform: scaleX(1);
    }
}